<!DOCTYPE HTML>
<html lang="en" >
    
    <head>
        
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>变量名提升 | JavaScript高级讲义</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 2.6.7">
        
        
        <meta name="HandheldFriendly" content="true"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
        
    <link rel="stylesheet" href="../gitbook/style.css">
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-highlight/website.css">
        
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-search/search.css">
        
    
        
        <link rel="stylesheet" href="../gitbook/plugins/gitbook-plugin-fontsettings/website.css">
        
    
    

        
    
    
    <link rel="next" href="../Sources/作用域链.html" />
    
    
    <link rel="prev" href="../Sources/词法作用域.html" />
    

        
    </head>
    <body>
        
        
    <div class="book"
        data-level="1.2.2"
        data-chapter-title="变量名提升"
        data-filepath="Sources/变量名提升.md"
        data-basepath=".."
        data-revision="Mon Oct 24 2016 01:31:56 GMT+0800 (CST)"
        data-innerlanguage="">
    

<div class="book-summary">
    <nav role="navigation">
        <ul class="summary">
            
            
            
            

            

            
    
        <li class="chapter " data-level="0" data-path="index.html">
            
                
                    <a href="../index.html">
                
                        <i class="fa fa-check"></i>
                        
                        Introduction
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1" >
            
            <span><b>1.</b> JavaScript高级知识</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.1" data-path="Sources/递归.html">
            
                
                    <a href="../Sources/递归.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.1.</b>
                        
                        递归
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.2" >
            
            <span><b>1.2.</b> 词法作用域</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.1" data-path="Sources/词法作用域.html">
            
                
                    <a href="../Sources/词法作用域.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.2.1.</b>
                        
                        词法作用域
                    </a>
            
            
        </li>
    
        <li class="chapter active" data-level="1.2.2" data-path="Sources/变量名提升.html">
            
                
                    <a href="../Sources/变量名提升.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.2.2.</b>
                        
                        变量名提升
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.2.3" data-path="Sources/作用域链.html">
            
                
                    <a href="../Sources/作用域链.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.2.3.</b>
                        
                        作用域链
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="Sources/闭包.html">
            
                
                    <a href="../Sources/闭包.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.3.</b>
                        
                        闭包
                    </a>
            
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="Sources/函数的四种调用模式.html">
            
                
                    <a href="../Sources/函数的四种调用模式.html">
                
                        <i class="fa fa-check"></i>
                        
                            <b>1.4.</b>
                        
                        函数的四种调用模式
                    </a>
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="2" >
            
            <span><b>2.</b> 面向对象案例</span>
            
            
            <ul class="articles">
                
    
        <li class="chapter " data-level="2.1" >
            
            <span><b>2.1.</b> 歌曲列表管理</span>
            
            
        </li>
    
        <li class="chapter " data-level="2.2" >
            
            <span><b>2.2.</b> Tab栏切换</span>
            
            
        </li>
    

            </ul>
            
        </li>
    


            
            <li class="divider"></li>
            <li>
                <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
                    Published with GitBook
                </a>
            </li>
            
        </ul>
    </nav>
</div>

    <div class="book-body">
        <div class="body-inner">
            <div class="book-header" role="navigation">
    <!-- Actions Left -->
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../" >JavaScript高级讲义</a>
    </h1>
</div>

            <div class="page-wrapper" tabindex="-1" role="main">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-">
                    
                        <p>JavaScript&#x662F;&#x89E3;&#x91CA;&#x578B;&#x7684;&#x8BED;&#x8A00;&#xFF0C;&#x4F46;&#x662F;&#x4ED6;&#x5E76;&#x4E0D;&#x662F;&#x771F;&#x7684;&#x5728;&#x8FD0;&#x884C;&#x7684;&#x65F6;&#x5019;&#x9010;&#x53E5;&#x7684;&#x5F80;&#x4E0B;&#x89E3;&#x6790;&#x6267;&#x884C;&#x3002;</p>
<p>&#x6211;&#x4EEC;&#x6765;&#x770B;&#x4E0B;&#x9762;&#x8FD9;&#x4E2A;&#x4F8B;&#x5B50;&#xFF1A;</p>
<pre><code class="lang-js">func();

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">func</span>(<span class="hljs-params"></span>)</span>{
     alert(<span class="hljs-string">&quot;Funciton has been called&quot;</span>);
}
</code></pre>
<p>&#x5728;&#x4E0A;&#x9762;&#x8FD9;&#x6BB5;&#x4EE3;&#x7801;&#x4E2D;&#xFF0C;&#x51FD;&#x6570;func&#x7684;&#x8C03;&#x7528;&#x662F;&#x5728;&#x5176;&#x58F0;&#x660E;&#x4E4B;&#x524D;&#xFF0C;&#x5982;&#x679C;&#x8BF4;JavaScript&#x4EE3;&#x7801;&#x771F;&#x7684;&#x662F;&#x9010;&#x53E5;&#x7684;&#x89E3;&#x6790;&#x6267;&#x884C;&#xFF0C;&#x90A3;&#x4E48;&#x5728;&#x7B2C;&#x4E00;&#x53E5;&#x8C03;&#x7528;&#x7684;&#x65F6;&#x5019;&#x5C31;&#x4F1A;&#x51FA;&#x9519;&#xFF0C;&#x7136;&#x800C;&#x4E8B;&#x5B9E;&#x5E76;&#x975E;&#x5982;&#x6B64;&#xFF0C;&#x4E0A;&#x9762;&#x7684;&#x4EE3;&#x7801;&#x53EF;&#x4EE5;&#x6B63;&#x5E38;&#x6267;&#x884C;&#xFF0C;&#x5E76;&#x4E14;alert&#x51FA;&#x6765;<code>Function has been called</code>&#x3002;</p>
<p><strong>&#x6240;&#x4EE5;&#xFF0C;&#x53EF;&#x4EE5;&#x5F97;&#x51FA;&#x7ED3;&#x8BBA;&#xFF0C;JavaScript&#x5E76;&#x975E;&#x4EC5;&#x5728;&#x8FD0;&#x884C;&#x65F6;&#x7B80;&#x7B80;&#x5355;&#x5355;&#x7684;&#x9010;&#x53E5;&#x89E3;&#x6790;&#x6267;&#x884C;&#xFF01;</strong></p>
<h2 id="javascript-&#x9884;&#x89E3;&#x6790;">JavaScript &#x9884;&#x89E3;&#x6790;</h2>
<p>JavaScript&#x5F15;&#x64CE;&#x5728;&#x5BF9;JavaScript&#x4EE3;&#x7801;&#x8FDB;&#x884C;&#x89E3;&#x91CA;&#x6267;&#x884C;&#x4E4B;&#x524D;&#xFF0C;&#x4F1A;&#x5BF9;JavaScript&#x4EE3;&#x7801;&#x8FDB;&#x884C;&#x9884;&#x89E3;&#x6790;&#xFF0C;&#x5728;&#x9884;&#x89E3;&#x6790;&#x9636;&#x6BB5;&#xFF0C;&#x4F1A;&#x5C06;&#x4EE5;&#x5173;&#x952E;&#x5B57;<code>var</code>&#x548C;<code>function</code>&#x5F00;&#x5934;&#x7684;&#x8BED;&#x53E5;&#x5757;&#x63D0;&#x524D;&#x8FDB;&#x884C;&#x5904;&#x7406;&#x3002;</p>
<p><em>&#x5173;&#x952E;&#x95EE;&#x9898;&#x662F;&#x600E;&#x4E48;&#x5904;&#x7406;&#x5462;&#xFF1F;</em></p>
<p>&#x5F53;&#x53D8;&#x91CF;&#x548C;&#x51FD;&#x6570;&#x7684;&#x58F0;&#x660E;&#x5904;&#x5728;&#x4F5C;&#x7528;&#x57DF;&#x6BD4;&#x8F83;&#x9760;&#x540E;&#x7684;&#x4F4D;&#x7F6E;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x53D8;&#x91CF;&#x548C;&#x51FD;&#x6570;&#x7684;&#x58F0;&#x660E;&#x4F1A;&#x88AB;&#x63D0;&#x5347;&#x5230;&#x4F5C;&#x7528;&#x57DF;&#x7684;&#x5F00;&#x5934;&#x3002;</p>
<p>&#x91CD;&#x65B0;&#x6765;&#x770B;&#x4E0A;&#x9762;&#x7684;&#x90A3;&#x6BB5;&#x4EE3;&#x7801;</p>
<pre><code class="lang-js">func();
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">func</span>(<span class="hljs-params"></span>)</span>{
     alert(<span class="hljs-string">&quot;Funciton has been called&quot;</span>);
}
</code></pre>
<p>&#x7531;&#x4E8E;JavaScript&#x7684;&#x9884;&#x89E3;&#x6790;&#x673A;&#x5236;&#xFF0C;&#x4E0A;&#x9762;&#x7684;&#x4EE3;&#x7801;&#x5C31;&#x7B49;&#x6548;&#x4E8E;&#xFF1A;</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">func</span>(<span class="hljs-params"></span>)</span>{
    alert(<span class="hljs-string">&quot;Funciton has been called&quot;</span>);
}
func();
</code></pre>
<p>&#x770B;&#x5B8C;&#x51FD;&#x6570;&#x58F0;&#x660E;&#x7684;&#x63D0;&#x5347;&#xFF0C;&#x518D;&#x6765;&#x770B;&#x4E00;&#x4E2A;&#x53D8;&#x91CF;&#x58F0;&#x660E;&#x63D0;&#x5347;&#x7684;&#x4F8B;&#x5B50;&#xFF1A;</p>
<pre><code class="lang-js">alert(a);
<span class="hljs-keyword">var</span> a = <span class="hljs-number">1</span>;
</code></pre>
<p>&#x7531;&#x4E8E;JavaScript&#x7684;&#x9884;&#x89E3;&#x6790;&#x673A;&#x5236;&#xFF0C;&#x4E0A;&#x9762;&#x8FD9;&#x6BB5;&#x4EE3;&#x7801;&#xFF0C;alert&#x51FA;&#x6765;&#x7684;&#x503C;&#x662F;<code>undefined</code>&#xFF0C;&#x5982;&#x679C;&#x6CA1;&#x6709;&#x9884;&#x89E3;&#x6790;&#xFF0C;&#x4EE3;&#x7801;&#x5E94;&#x8BE5;&#x4F1A;&#x76F4;&#x63A5;&#x62A5;&#x9519;<code>a is not defined</code>&#xFF0C;&#x800C;&#x4E0D;&#x662F;&#x8F93;&#x51FA;&#x503C;&#x3002;</p>
<p>Wait a minute, &#x4E0D;&#x662F;&#x8BF4;&#x8981;&#x63D0;&#x524D;&#x7684;&#x5417;&#xFF1F;&#x90A3;&#x4E0D;&#x662F;&#x5E94;&#x8BE5;alert&#x51FA;&#x6765;1&#xFF0C;&#x4E3A;&#x4EC0;&#x4E48;&#x662F;<code>undefined</code>?</p>
<p>&#x90A3;&#x4E48;&#x5728;&#x8FD9;&#x91CC;&#x6709;&#x5FC5;&#x8981;&#x8BF4;&#x4E00;&#x4E0B;<code>&#x58F0;&#x660E;</code>&#x3001;<code>&#x5B9A;&#x4E49;</code>&#x3001;<code>&#x521D;&#x59CB;&#x5316;</code>&#x7684;&#x533A;&#x522B;&#x3002;&#x5176;&#x5B9E;&#x8FD9;&#x51E0;&#x4E2A;&#x6982;&#x5FF5;&#x662F;C&#x7CFB;&#x8BED;&#x8A00;&#x7684;&#x4EBA;&#x5E94;&#x8BE5;&#x90FD;&#x6BD4;&#x8F83;&#x4E86;&#x89E3;&#x7684;&#x3002;</p>
<table>
<thead>
<tr>
<th>&#x884C;&#x4E3A;</th>
<th>&#x8BF4;&#x660E;</th>
</tr>
</thead>
<tbody>
<tr>
<td>&#x58F0;&#x660E;</td>
<td>&#x544A;&#x8BC9;&#x7F16;&#x8BD1;&#x5668;/&#x89E3;&#x6790;&#x5668;&#x6709;&#x8FD9;&#x4E2A;&#x53D8;&#x91CF;&#x5B58;&#x5728;,&#x8FD9;&#x4E2A;&#x884C;&#x4E3A;&#x662F;&#x4E0D;&#x5206;&#x914D;&#x5185;&#x5B58;&#x7A7A;&#x95F4;&#x7684;,&#x5728;JavaScript&#x4E2D;&#xFF0C;&#x58F0;&#x660E;&#x4E00;&#x4E2A;&#x53D8;&#x91CF;&#x7684;&#x64CD;&#x4F5C;&#x4E3A;&#xFF1A;<code>var a;</code></td>
</tr>
<tr>
<td>&#x5B9A;&#x4E49;</td>
<td>&#x4E3A;&#x53D8;&#x91CF;&#x5206;&#x914D;&#x5185;&#x5B58;&#x7A7A;&#x95F4;&#xFF0C;&#x5728;C&#x8BED;&#x8A00;&#x4E2D;&#xFF0C;&#x4E00;&#x822C;&#x58F0;&#x660E;&#x5C31;&#x5305;&#x542B;&#x4E86;&#x5B9A;&#x4E49;&#xFF0C;&#x6BD4;&#x5982;&#xFF1A;<code>int a;</code>,&#x4F46;&#x662F;&#x5728;JavaScript&#x4E2D;&#xFF0C;<code>var a;</code>&#x8FD9;&#x79CD;&#x5F62;&#x5F0F;&#x5C31;&#x53EA;&#x662F;&#x58F0;&#x660E;&#x4E86;&#x3002;</td>
</tr>
<tr>
<td>&#x521D;&#x59CB;&#x5316;</td>
<td>&#x5728;&#x5B9A;&#x4E49;&#x53D8;&#x91CF;&#x4E4B;&#x540E;&#xFF0C;&#x7CFB;&#x7EDF;&#x4E3A;&#x53D8;&#x91CF;&#x5206;&#x914D;&#x7684;&#x7A7A;&#x95F4;&#x5185;&#x5B58;&#x50A8;&#x7684;&#x503C;&#x662F;&#x4E0D;&#x786E;&#x5B9A;&#x7684;&#xFF0C;&#x6240;&#x4EE5;&#x9700;&#x8981;&#x5BF9;&#x8FD9;&#x4E2A;&#x7A7A;&#x95F4;&#x8FDB;&#x884C;&#x521D;&#x59CB;&#x5316;&#xFF0C;&#x4EE5;&#x786E;&#x4FDD;&#x7A0B;&#x5E8F;&#x7684;&#x5B89;&#x5168;&#x6027;&#x548C;&#x786E;&#x5B9A;&#x6027;</td>
</tr>
<tr>
<td>&#x8D4B;&#x503C;</td>
<td>&#x8D4B;&#x503C;&#x5C31;&#x662F;&#x53D8;&#x91CF;&#x5728;&#x5206;&#x914D;&#x7A7A;&#x95F4;&#x4E4B;&#x540E;&#x7684;&#x67D0;&#x4E2A;&#x65F6;&#x95F4;&#x91CC;&#xFF0C;&#x5BF9;&#x53D8;&#x91CF;&#x7684;&#x503C;&#x8FDB;&#x884C;&#x7684;&#x5237;&#x65B0;&#x64CD;&#x4F5C;&#xFF08;&#x4FEE;&#x6539;&#x5B58;&#x50A8;&#x7A7A;&#x95F4;&#x5185;&#x7684;&#x6570;&#x636E;)</td>
</tr>
</tbody>
</table>
<p>&#x6240;&#x4EE5;&#x6211;&#x4EEC;&#x8BF4;&#x7684;&#x63D0;&#x5347;&#xFF0C;&#x662F;<strong>&#x58F0;&#x660E;</strong>&#x7684;&#x63D0;&#x5347;&#x3002;</p>
<p>&#x90A3;&#x4E48;&#x518D;&#x56DE;&#x8FC7;&#x5934;&#x770B;&#xFF0C;&#x4E0A;&#x9762;&#x7684;&#x4EE3;&#x7801;&#x5C31;&#x7B49;&#x6548;&#x4E8E;&#xFF1A;</p>
<pre><code class="lang-js"><span class="hljs-keyword">var</span> a; <span class="hljs-comment">//&#x8FD9;&#x91CC;&#x662F;&#x58F0;&#x660E;</span>
alert(a);<span class="hljs-comment">//&#x53D8;&#x91CF;&#x58F0;&#x660E;&#x4E4B;&#x540E;&#x5E76;&#x672A;&#x6709;&#x521D;&#x59CB;&#x5316;&#x548C;&#x8D4B;&#x503C;&#x64CD;&#x4F5C;&#xFF0C;&#x6240;&#x4EE5;&#x8FD9;&#x91CC;&#x662F; undefined</span>
a = <span class="hljs-number">1</span>;
</code></pre>
<h2 id="&#x590D;&#x6742;&#x70B9;&#x7684;&#x60C5;&#x51B5;&#x5206;&#x6790;">&#x590D;&#x6742;&#x70B9;&#x7684;&#x60C5;&#x51B5;&#x5206;&#x6790;</h2>
<p>&#x901A;&#x8FC7;&#x4E0A;&#x4E00;&#x5C0F;&#x8282;&#x7684;&#x5185;&#x5BB9;&#xFF0C;&#x6211;&#x4EEC;&#x5BF9;&#x53D8;&#x91CF;&#x3001;&#x51FD;&#x6570;&#x58F0;&#x660E;&#x63D0;&#x5347;&#x5DF2;&#x7ECF;&#x6709;&#x4E86;&#x4E00;&#x4E2A;&#x6700;&#x57FA;&#x672C;&#x7684;&#x7406;&#x89E3;&#x3002;&#x90A3;&#x4E48;&#x63A5;&#x4E0B;&#x6765;&#xFF0C;&#x6211;&#x4EEC;&#x5C31;&#x6765;&#x5206;&#x6790;&#x4E00;&#x4E9B;&#x7565;&#x590D;&#x6742;&#x7684;&#x60C5;&#x51B5;&#x3002;</p>
<h3 id="&#x51FD;&#x6570;&#x540C;&#x540D;">&#x51FD;&#x6570;&#x540C;&#x540D;</h3>
<p>&#x89C2;&#x5BDF;&#x4E0B;&#x9762;&#x8FD9;&#x6BB5;&#x4EE3;&#x7801;:</p>
<pre><code class="lang-js">func1();
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">func1</span>(<span class="hljs-params"></span>)</span>{
     <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;This is func1&apos;</span>);
}

func1();
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">func1</span>(<span class="hljs-params"></span>)</span>{
     <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;This is last func1&apos;</span>);
}
</code></pre>
<p>&#x8F93;&#x51FA;&#x7ED3;&#x679C;&#x4E3A;&#xFF1A;</p>
<pre><code class="lang-text">This is last func1
This is last func1
</code></pre>
<p>&#x539F;&#x56E0;&#x5206;&#x6790;&#xFF1A;&#x7531;&#x4E8E;&#x9884;&#x89E3;&#x6790;&#x673A;&#x5236;&#xFF0C;<code>func1</code>&#x7684;&#x58F0;&#x660E;&#x4F1A;&#x88AB;&#x63D0;&#x5347;&#xFF0C;&#x63D0;&#x5347;&#x4E4B;&#x540E;&#x7684;&#x4EE3;&#x7801;&#x4E3A;&#xFF1A;</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">func1</span>(<span class="hljs-params"></span>)</span>{
     <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;This is func1&apos;</span>);
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">func1</span>(<span class="hljs-params"></span>)</span>{
     <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;This is last func1&apos;</span>);
}

func1();
func1();
</code></pre>
<p>&#x540C;&#x540D;&#x7684;&#x51FD;&#x6570;&#xFF0C;&#x540E;&#x9762;&#x7684;&#x4F1A;&#x8986;&#x76D6;&#x524D;&#x9762;&#x7684;&#xFF0C;&#x6240;&#x4EE5;&#x4E24;&#x6B21;&#x8F93;&#x51FA;&#x7ED3;&#x679C;&#x90FD;&#x662F;<code>This is last func1</code>&#x3002;</p>
<h3 id="&#x53D8;&#x91CF;&#x548C;&#x51FD;&#x6570;&#x540C;&#x540D;">&#x53D8;&#x91CF;&#x548C;&#x51FD;&#x6570;&#x540C;&#x540D;</h3>
<pre><code class="lang-js">alert(foo);
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo</span>(<span class="hljs-params"></span>)</span>{}
<span class="hljs-keyword">var</span> foo = <span class="hljs-number">2</span>;
</code></pre>
<p>&#x5F53;&#x51FA;&#x73B0;&#x53D8;&#x91CF;&#x58F0;&#x660E;&#x548C;&#x51FD;&#x6570;&#x540C;&#x540D;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x53EA;&#x4F1A;&#x5BF9;&#x51FD;&#x6570;&#x58F0;&#x660E;&#x8FDB;&#x884C;&#x63D0;&#x5347;&#xFF0C;&#x53D8;&#x91CF;&#x4F1A;&#x88AB;&#x5FFD;&#x7565;&#x3002;&#x6240;&#x4EE5;&#x4E0A;&#x9762;&#x7684;&#x4EE3;&#x7801;&#x7684;&#x8F93;&#x51FA;&#x7ED3;&#x679C;&#x4E3A;</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo</span>(<span class="hljs-params"></span>)</span>{}
</code></pre>
<p>&#x6211;&#x4EEC;&#x8FD8;&#x662F;&#x6765;&#x5427;&#x9884;&#x89E3;&#x6790;&#x4E4B;&#x540E;&#x7684;&#x4EE3;&#x7801;&#x5C55;&#x73B0;&#x51FA;&#x6765;:</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo</span>(<span class="hljs-params"></span>)</span>{};
alert(foo);
foo = <span class="hljs-number">2</span>;
</code></pre>
<p>&#x518D;&#x6765;&#x770B;&#x4E00;&#x79CD;</p>
<pre><code class="lang-js"><span class="hljs-keyword">var</span> num = <span class="hljs-number">1</span>;
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">num</span> (<span class="hljs-params"></span>) </span>{
     alert( num );
}
num();
</code></pre>
<p>&#x4EE3;&#x7801;&#x6267;&#x884C;&#x7ED3;&#x679C;&#x4E3A;&#xFF1A;</p>
<pre><code>Uncaught TypeError: num is not a function
</code></pre><p>&#x76F4;&#x63A5;&#x4E0A;&#x9884;&#x89E3;&#x6790;&#x540E;&#x7684;&#x4EE3;&#x7801;&#xFF1A;</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">num</span>(<span class="hljs-params"></span>)</span>{
     alert(num);
}

num = <span class="hljs-number">1</span>;
num();
</code></pre>
<h2 id="&#x9884;&#x89E3;&#x6790;&#x662F;&#x5206;&#x4F5C;&#x7528;&#x57DF;&#x7684;">&#x9884;&#x89E3;&#x6790;&#x662F;&#x5206;&#x4F5C;&#x7528;&#x57DF;&#x7684;</h2>
<p>&#x58F0;&#x660E;&#x63D0;&#x5347;&#x5E76;&#x4E0D;&#x662F;&#x5C06;&#x6240;&#x6709;&#x7684;&#x58F0;&#x660E;&#x90FD;&#x63D0;&#x5347;&#x5230;window&#x5BF9;&#x8C61;&#x4E0B;&#x9762;&#xFF0C;&#x63D0;&#x5347;&#x539F;&#x5219;&#x662F;&#x63D0;&#x5347;&#x5230;&#x53D8;&#x91CF;&#x8FD0;&#x884C;&#x7684;&#x73AF;&#x5883;(&#x4F5C;&#x7528;&#x57DF;)&#x4E2D;&#x53BB;&#x3002;</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">showMsg</span>(<span class="hljs-params"></span>)
</span>{
    <span class="hljs-keyword">var</span> msg = <span class="hljs-string">&apos;This is message&apos;</span>;
}
alert(msg); <span class="hljs-comment">// msg&#x672A;&#x5B9A;&#x4E49;</span>
</code></pre>
<p>&#x8FD8;&#x662F;&#x76F4;&#x63A5;&#x628A;&#x9884;&#x89E3;&#x6790;&#x4E4B;&#x540E;&#x7684;&#x4EE3;&#x7801;&#x5199;&#x51FA;&#x6765;&#xFF1A;</p>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">showMsg</span>(<span class="hljs-params"></span>)
</span>{
    <span class="hljs-keyword">var</span> msg;
    msg = <span class="hljs-string">&apos;This is message&apos;</span>;
}
alert(msg); <span class="hljs-comment">// msg&#x672A;&#x5B9A;&#x4E49;</span>
</code></pre>
<h2 id="&#x9884;&#x89E3;&#x6790;&#x662F;&#x5206;&#x6BB5;&#x7684;">&#x9884;&#x89E3;&#x6790;&#x662F;&#x5206;&#x6BB5;&#x7684;</h2>
<p>&#x5206;&#x6BB5;&#xFF0C;&#x5176;&#x5B9E;&#x5C31;&#x5206;script&#x6807;&#x7B7E;&#x7684;</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-title">script</span>&gt;</span><span class="javascript">
func(); <span class="hljs-comment">// &#x8F93;&#x51FA; AA2;</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">func</span>(<span class="hljs-params"></span>)</span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;AA1&apos;</span>);
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">func</span>(<span class="hljs-params"></span>)</span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;AA2&apos;</span>);
}
</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-title">script</span>&gt;</span><span class="javascript">
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">func</span>(<span class="hljs-params"></span>)</span>{
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&apos;AA3&apos;</span>);
}
</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
</code></pre>
<p>&#x5728;&#x4E0A;&#x9762;&#x4EE3;&#x7801;&#x4E2D;&#xFF0C;&#x7B2C;&#x4E00;&#x4E2A;script&#x6807;&#x7B7E;&#x4E2D;&#x7684;&#x4E24;&#x4E2A;<code>func</code>&#x8FDB;&#x884C;&#x4E86;&#x63D0;&#x5347;&#xFF0C;&#x7B2C;&#x4E8C;&#x4E2A;<code>func</code>&#x8986;&#x76D6;&#x4E86;&#x7B2C;&#x4E00;&#x4E2A;<code>func</code>&#xFF0C;&#x4F46;&#x662F;&#x7B2C;&#x4E8C;&#x4E2A;script&#x6807;&#x7B7E;&#x4E2D;&#x7684;<code>func</code>&#x5E76;&#x6CA1;&#x6709;&#x8986;&#x76D6;&#x4E0A;&#x9762;&#x7684;&#x7B2C;&#x4E8C;&#x4E2A;<code>func</code>&#x3002;&#x6240;&#x4EE5;&#x8BF4;&#x9884;&#x89E3;&#x6790;&#x662F;&#x5206;&#x6BB5;&#x7684;&#x3002;</p>
<p>tip:&#x4F46;&#x662F;&#x8981;&#x6CE8;&#x610F;&#xFF0C;&#x5206;&#x6BB5;&#x53EA;&#x662F;&#x5355;&#x7EAF;&#x7684;&#x9488;&#x5BF9;&#x51FD;&#x6570;&#xFF0C;&#x53D8;&#x91CF;&#x5E76;&#x4E0D;&#x4F1A;&#x5206;&#x6BB5;&#x9884;&#x89E3;&#x6790;&#x3002;</p>
<h2 id="&#x51FD;&#x6570;&#x8868;&#x8FBE;&#x5F0F;&#x5E76;&#x4E0D;&#x4F1A;&#x88AB;&#x63D0;&#x5347;">&#x51FD;&#x6570;&#x8868;&#x8FBE;&#x5F0F;&#x5E76;&#x4E0D;&#x4F1A;&#x88AB;&#x63D0;&#x5347;</h2>
<pre><code class="lang-js">func();
<span class="hljs-keyword">var</span> func = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
    alert(<span class="hljs-string">&quot;&#x6211;&#x88AB;&#x63D0;&#x5347;&#x4E86;&quot;</span>);
};
</code></pre>
<p>&#x8FD9;&#x91CC;&#x4F1A;&#x76F4;&#x63A5;&#x62A5;&#x9519;&#xFF0C;<code>func is not a function</code>&#xFF0C;&#x539F;&#x56E0;&#x5C31;&#x662F;&#x51FD;&#x6570;&#x8868;&#x8FBE;&#x5F0F;&#xFF0C;&#x5E76;&#x4E0D;&#x4F1A;&#x88AB;&#x63D0;&#x5347;&#x3002;&#x53EA;&#x662F;&#x7B80;&#x5355;&#x5730;&#x5F53;&#x505A;&#x53D8;&#x91CF;&#x58F0;&#x660E;&#x8FDB;&#x884C;&#x4E86;&#x5904;&#x7406;&#xFF0C;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre><code class="lang-js"><span class="hljs-keyword">var</span> func;
func();
func = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
    alert(<span class="hljs-string">&quot;&#x6211;&#x88AB;&#x63D0;&#x5347;&#x4E86;&quot;</span>);
}
</code></pre>
<h2 id="&#x6761;&#x4EF6;&#x5F0F;&#x51FD;&#x6570;&#x58F0;&#x660E;">&#x6761;&#x4EF6;&#x5F0F;&#x51FD;&#x6570;&#x58F0;&#x660E;</h2>
<pre><code class="lang-js"><span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">typeof</span> func);
<span class="hljs-keyword">if</span>(<span class="hljs-literal">true</span>){
    <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
        <span class="hljs-keyword">return</span> <span class="hljs-number">1</span>;
    }
}
<span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">typeof</span> func);
</code></pre>
<p>&#x4E0A;&#x9762;&#x8FD9;&#x6BB5;&#x4EE3;&#x7801;&#xFF0C;&#x5C31;&#x662F;&#x6240;&#x8C13;&#x7684;&#x6761;&#x4EF6;&#x5F0F;&#x51FD;&#x6570;&#x58F0;&#x660E;&#xFF0C;&#x8FD9;&#x6BB5;&#x4EE3;&#x7801;&#x5728;Gecko&#x5F15;&#x64CE;&#x4E2D;&#x6253;&#x5370;<code>&quot;undefined&quot;</code>&#x3001;<code>&quot;function&quot;</code>&#xFF1B;&#x800C;&#x5728;&#x5176;&#x4ED6;&#x6D4F;&#x89C8;&#x5668;&#x4E2D;&#x5219;&#x6253;&#x5370;<code>&quot;function&quot;</code>&#x3001;<code>&quot;function&quot;</code>&#x3002;</p>
<p>&#x539F;&#x56E0;&#x5728;&#x4E8E;Gecko&#x52A0;&#x5165;&#x4E86;ECMAScript&#x4EE5;&#x5916;&#x7684;&#x4E00;&#x4E2A;feature&#xFF1A;&#x6761;&#x4EF6;&#x5F0F;&#x51FD;&#x6570;&#x58F0;&#x660E;&#x3002;</p>
<blockquote>
<p>Conditionally created functions Functions can be conditionally declared, that is, a function declaration can be nested within an if statement.</p>
<p>Note: Although this kind of function looks like a function declaration, it is actually an expression (or statement), since it is nested within another statement. See differences between function declarations and function expressions.</p>
</blockquote>
<p>Note&#x4E2D;&#x7684;&#x6587;&#x5B57;&#x8BF4;&#x660E;&#xFF0C;&#x6761;&#x4EF6;&#x5F0F;&#x51FD;&#x6570;&#x58F0;&#x660E;&#x7684;&#x5904;&#x7406;&#x548C;&#x51FD;&#x6570;&#x8868;&#x8FBE;&#x5F0F;&#x7684;&#x5904;&#x7406;&#x65B9;&#x5F0F;&#x4E00;&#x6837;&#xFF0C;&#x6240;&#x4EE5;&#x6761;&#x4EF6;&#x5F0F;&#x51FD;&#x6570;&#x58F0;&#x660E;&#x6CA1;&#x6709;&#x58F0;&#x660E;&#x63D0;&#x5347;&#x7684;&#x7279;&#x6027;&#x3002;</p>

                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="../Sources/词法作用域.html" class="navigation navigation-prev " aria-label="Previous page: 词法作用域"><i class="fa fa-angle-left"></i></a>
        
        
        <a href="../Sources/作用域链.html" class="navigation navigation-next " aria-label="Next page: 作用域链"><i class="fa fa-angle-right"></i></a>
        
    </div>
</div>

        
<script src="../gitbook/app.js"></script>

    
    <script src="../gitbook/plugins/gitbook-plugin-search/lunr.min.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-search/search.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-sharing/buttons.js"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-fontsettings/buttons.js"></script>
    

<script>
require(["gitbook"], function(gitbook) {
    var config = {"highlight":{},"search":{"maxIndexSize":1000000},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2}};
    gitbook.start(config);
});
</script>

        
    </body>
    
</html>
